import {Avatar, Card, Col, List, Row, Typography} from 'antd';
import React, { useState, useEffect } from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Link, connect} from 'umi';
import styles from './style.less';
import moment from "moment";
import Title from "antd/lib/typography/Title";
import Comments from "@/pages/book/detail/components/Comments";
import Share from "@/components/share";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import ReactMarkdown from "react-markdown";
import 'github-markdown-css';
import {genTdkCrumbs, genTdkCrumbsFor404} from "@/utils/utils";

const Document = ({currentChapter = {id: '', parentId: '', pubTitle: '', pubContent: ''}, dispatch }) => {
  const [article, setArticle] = useState(currentChapter?? {});

  useEffect(async () => {
    if (article?.id) {
      await genTdkCrumbs(currentChapter, dispatch, '正文', '');
    }
  }, [article?.id, currentChapter]);

  const titleStyle = {
    marginBottom: '8px',
    paddingBottom: '8px',
    lineHeight: '40px',
    fontSize: '28px',
    fontWeight: '500',
    borderBottom: '2px solid #f4f4f4'
  };

  const enumTags = (tags = [], ) => {
    const temp = [];
    for (let i = 0, len = tags.length; i < len; i += 1) {
      const tag = tags[i];
      if (tag)
        temp.push((<Link key={`${tag.id}-art-tag-${i}`} to={`/archives/tag/${tag.slug}`} target="_blank" rel="noopener">{i<=len-2 ? `${tag.name}, ` : `${tag.name}`}</Link>));
    }
    return temp;
  };

  const articleBody = article.id && (
    <Typography>
      <Title level={1} style={titleStyle}>{article.pubTitle}</Title>
      <div className={styles.pubMeta}>
        <Avatar
          key={1}
          src={article.member.avatar}
          tips={article.member.nickname}
        />{' '}
        <Link to={`/archives-author/${article.member.id}.html`} target="_blank" rel="noopener">{article.member.nickname}</Link>
        <em>{moment(article.createTime).format('YYYY-MM-DD HH:mm')}</em>
        {' '}阅读 {article.views}
      </div>
      <div className={styles.entry}>
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} className={"markdown-body"}>
          {article.pubContent}
        </ReactMarkdown>
      </div>
      <Share style={styles.share} title={article.pubTitle || '无标题'} src={'@/assets/log.svg'}/>
      <div className={styles.pubMetaBottom}>
        <div className={styles.tags}>
        <span>
          tags: {article.tags && enumTags(article.tags)}
        </span>
        </div>
      </div>
      <div className={styles.pubPrevNext}>
        {article.prev && (<><strong>上一篇</strong>：<Link to={`/doc/book/${article.parentId}/chapter/${article.prev.id}.html`} rel="prev">{article.prev.pubTitle}</Link><br/></>)}
        {article.next && (<><strong>下一篇</strong>：<Link to={`/doc/book/${article.parentId}/chapter/${article.next.id}.html`} rel="next">{article.next.pubTitle}</Link></>)}
      </div>
      <div className={styles.relatedPost}>
        <h2>相关内容</h2>
        {
          article.relPubs?.length > 0 && (
            <List
              grid={{
                gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 2, xxl: 2,
              }}
              dataSource={article.relPubs}
              renderItem={(item, index) => (
                <List.Item key={`${item.id}-rel-${index}`}>
                  <Link to={`/doc/book/${article.parentId}/chapter/${item.id}.html`} rel="noopener">
                    {item.pubTitle}
                  </Link>
                </List.Item>
              )}
            />
          )
        }
      </div>
      <div className={styles.clearfix}/>
      <div className={styles.comment}>
        <div className={styles.clearfix}/>
        <h3>在线评论</h3>
        <Comments id={article.id}/>
      </div>
    </Typography>
  );

  return (
    <PageContainer title={false} breadcrumb={false}>
      <Card className={styles.tabsCard} bordered={true}>
        {article === "" ? <p>请求的内容不存在了……</p> : articleBody}
      </Card>
    </PageContainer>
  );
};

export default connect(({ user }) => {
  tdk: user.tdk
})(Document);